import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:new_yuqib_app/yqbConfig/color_theme.dart';
import 'package:new_yuqib_app/yqbConfig/file_path.dart';
import 'package:new_yuqib_app/yqbConfig/yqb_base.dart';
import 'package:new_yuqib_app/yqbView/WebView/view.dart';
import 'package:new_yuqib_app/yqbView/loginView/code_btn_widget.dart';

import 'controller.dart';

///登录页
class LoginView extends StatelessWidget {
  const LoginView({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.put(LoginViewController());
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: FocusScope.of(context).unfocus,
      child: Scaffold(
        backgroundColor: Colors.white,
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          backgroundColor: Colors.white,
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 32),
              Row(
                children: [
                  Container(
                    width: 64,
                    height: 64,
                    decoration: BoxDecoration(
                      image: const DecorationImage(image: AssetImage(FilePath.iconPath), fit: BoxFit.fill),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  const SizedBox(width: 12),
                  const Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "欢迎登录$appName！",
                        style: TextStyle(fontSize: 24, color: ColorTheme.primaryTextColor, fontWeight: FontWeight.w600),
                      ),
                      Text(
                        "信用卡/网贷逾期处理",
                        style: TextStyle(color: ColorTheme.primaryTextColor2, fontWeight: FontWeight.w500),
                      ),
                    ],
                  ),
                ],
              ),
              const SizedBox(height: 48),
              const Text("手机号", style: TextStyle(fontWeight: FontWeight.w500, color: ColorTheme.primaryTextColor2)),
              const SizedBox(height: 8),
              Container(
                height: 44,
                padding: const EdgeInsets.symmetric(horizontal: 12),
                alignment: Alignment.centerLeft,
                decoration: BoxDecoration(
                  border: Border.all(width: 1, color: ColorTheme.borderColor),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Row(
                  children: [
                    const Text(
                      "+86",
                      style: TextStyle(fontSize: 16, color: ColorTheme.primaryTextColor),
                    ),
                    Container(
                      width: 1,
                      height: 18,
                      margin: const EdgeInsets.symmetric(horizontal: 8),
                      decoration: BoxDecoration(
                        color: ColorTheme.lineColor,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    Expanded(
                      child: TextField(
                        maxLength: 11,
                        controller: logic.phoneController,
                        focusNode: logic.phoneFocusNode,
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly,
                        ],
                        decoration: const InputDecoration(
                          hintText: "请输入手机号",
                          hintStyle: TextStyle(fontSize: 16, color: ColorTheme.secondaryTextColor),
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.zero,
                          isDense: true,
                          counterText: "",
                        ),
                        style: const TextStyle(fontSize: 16, color: ColorTheme.primaryTextColor),
                        keyboardType: TextInputType.phone,
                        onChanged: (value) {
                          if (value.length >= 11) FocusScope.of(context).unfocus();
                        },
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 18),
              const Text("验证码", style: TextStyle(fontWeight: FontWeight.w500, color: ColorTheme.primaryTextColor2)),
              const SizedBox(height: 8),
              Row(
                children: [
                  Expanded(
                    child: Container(
                      height: 44,
                      padding: const EdgeInsets.symmetric(horizontal: 12),
                      alignment: Alignment.centerLeft,
                      decoration: BoxDecoration(
                        border: Border.all(width: 1, color: ColorTheme.borderColor),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: TextField(
                        controller: logic.codeController,
                        inputFormatters: [
                          FilteringTextInputFormatter.singleLineFormatter,
                        ],
                        maxLength: 6,
                        cursorRadius: const Radius.circular(8),
                        decoration: const InputDecoration(
                          hintText: "请输入验证码",
                          hintStyle: TextStyle(fontSize: 16, color: ColorTheme.secondaryTextColor),
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.zero,
                          isDense: true,
                          counterText: "",
                        ),
                        style: const TextStyle(fontSize: 16, color: ColorTheme.primaryTextColor),
                        keyboardType: TextInputType.phone,
                        onChanged: (value) {
                          if (value.length >= 6) FocusScope.of(context).unfocus();
                        },
                      ),
                    ),
                  ),
                  const SizedBox(width: 9),
                  const CodeBtnWidget(),
                ],
              ),
              const SizedBox(height: 40),
              InkWell(
                onTap: logic.login,
                child: Container(
                  height: 44,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    gradient: GradientTheme.btnGradient(),
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: ShadowColor.loginButtonShadowColor,
                        offset: const Offset(0, 5),
                        blurRadius: 12,
                      ),
                    ],
                  ),
                  child: const Text(
                    "登录",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white),
                  ),
                ),
              ),
              const SizedBox(height: 24),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Obx(() {
                    return Checkbox(
                      value: logic.isChecked.value,
                      tristate: false,
                      shape: const CircleBorder(),
                      side: const BorderSide(width: 1, color: ColorTheme.secondaryTextColor),
                      activeColor: ColorTheme.buttonTextColor,
                      visualDensity: const VisualDensity(horizontal: -3.5, vertical: -4),
                      onChanged: (value) {
                        logic.isChecked.value = value!;
                      },
                    );
                  }),
                  RichText(
                    text: TextSpan(
                        text: "我已阅读并同意",
                        style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: ColorTheme.secondaryTextColor),
                        children: [
                          TextSpan(
                            text: "《用户协议》",
                            style: const TextStyle(color: ColorTheme.primaryTextColor),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                Get.to(const WebView(typeId: 0));
                              },
                          ),
                          TextSpan(
                            text: "《隐私政策》",
                            style: const TextStyle(color: ColorTheme.primaryTextColor),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                Get.to(const WebView(typeId: 1));
                              },
                          ),
                        ]),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
